iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

前端幼鳥三十天養成記系列 第 4

DAY4 雙飛翼布局 - 三個欄的C位爭奪戰(下)

  • 分享至 

  • xImage
  •  

雙飛翼和聖杯不同的是,雙飛翼在<main>裏面放一個子元素。聖杯是在外面包一個父元素。
html css基本設定,大致一樣,只差

  • 少了個<div id="container">
  • 多了個<main>的子元素 <div id="center_block">main
<body>
	<header>header</header>
	<main class="column">
		<div id="center_block">main的子元素</div>
	</main>
	<aside id="left" class="column">left</aside>
	<aside id="right" class="column">right</aside>
	<footer>footer</footer>
</body>
body, h1, h2, h3, p, ul, ol, li, th, td, img{
	margin: 0px;padding: 0px;
}
.column{
	float:left;
	height:50px;
}
header{
    text-align: center;
    background-color:aquamarine;
}
main{
    background-color: black;
    width: 100%;
    color: darkgrey;
}
#left{
    background-color:crimson;
    width: 300px;
}
#right{
    background-color: cadetblue;
    width: 200px;
 }
footer{
	clear:both;
	background-color:darkgoldenrod;
}

子元素設定margin,「推」出左右欄空間

<div id="center_block">設定margin向外推出左右空位。再用margin-left讓左右欄回巢。

#center_block{
	margin-left:300px;
	margin-right:200px;
}
#left{
	margin-left:-100%
}
#right{
	margin-left:-200px;
}

超級比一比 - 聖杯與雙飛翼的不同與相同

相似的地方,我覺得有三點,

  1. float
  2. margin負值
  3. 透過父元素子元素的關係限制的大小。

不同的我整理在表格。下面兩張gif圖,在展示瀏覽器視窗縮小到一定程度時,先不見的是哪一欄。
聖杯 雙飛翼比較
聖杯最先不見右邊欄
雙飛翼最先不見中間欄


參考資料

经典布局之圣杯布局&双飞翼布局


時間:9/9 01:26PM
音樂: 男孩 梁博
飲料:白開水
地點:房間的深藍色皮沙發
狀態:肚子餓的概念

其實這原本是DAY3的後半篇,但考慮到目標受眾是幼鳥等級的,一篇的量有點太長,怕幼鳥們看不下去,或是吸收不好,覺得太硬/images/emoticon/emoticon06.gif
所以拆成兩篇,不知道這樣會不會對閱讀品質提升 /images/emoticon/emoticon08.gif


上一篇
DAY3 聖杯布局 - 三個欄的C位爭奪戰(上)
下一篇
DAY5 速談flex gride布局、定位、響應式
系列文
前端幼鳥三十天養成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言